<template>
<div id="main">
  <div id="" class="card">
    <div style="width: 1000px;height: auto; margin: auto;padding: 5px">
      <!--操作按钮-->
      <el-form :inline="true" class="demo-form-inline center" >
          <el-row :gutter="18">
            <el-col :span="3"><el-button type="primary" icon="el-icon-plus" @click="details_div=true" plain>添加商品</el-button></el-col>
            <el-col :span="15"><el-button type="danger" icon="el-icon-delete" plain >删除商品</el-button></el-col>
            <el-col :span="3"><el-button type="success" icon="el-icon-success" plain @click="addOrder">提交申请</el-button></el-col>
            <el-col :span="3"><el-button icon="el-icon-refresh" plain>重置数据</el-button></el-col>
          </el-row>
      </el-form>

      <el-form :inline="true" class="demo-form-inline">
        <el-row>
          <el-col :span="16">
            <el-form-item label="订单编号:">
              <input v-model="PurchaseOrders.purchasEorderNumber" style="border: none" >
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="总计:">
              <input v-model="PurchaseOrders.purchaseOrderAmount"  style="border: none" readonly>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="登记人:">
              <el-input v-model="PurchaseOrders.register"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="登记时间:">
              <el-input v-model="PurchaseOrders.purchaseOrderTime" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!--数据表格-->
      <el-table
          ref="multipleTable"
          :data="order"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
        label="序号"
        width="120">
          <template slot-scope="scope">
            {{(scope.$index+1)+(currentPage-1)*pageSize}}
          </template>
        </el-table-column>
        <el-table-column
            prop="imageUrl"
            label="图片"
            width="120">
        </el-table-column>
        <el-table-column
            prop="productName"
            label="商品名称"
            width="120">
        </el-table-column>
        <el-table-column
            prop="supplierName"
            label="供应商公司名称(供应商电话)"
            width="200">
          <template slot-scope="scope">
            <span>{{scope.row.supplierName+"("+scope.row.supplierNumber+")"}}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="productPrice"
            label="单价(元)"
            width="120">
        </el-table-column>
        <el-table-column
            prop="count"
            label="数量"
            width="120">
          <template slot-scope="scope">
            <span>
              <el-input v-model="scope.row.count" @blur="amount(scope.$index,scope.row.count,scope.row.productPrice)"></el-input>
            </span>
          </template>
        </el-table-column>
        <el-table-column
            prop="total"
            label="小计"
            width="120">
          <template slot-scope="scope">
              <span>{{scope.row.total}}元</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <div  class="el-overlay" style="z-index: 2055;" v-show="details_div">
    <div aria-modal="true" aria-label="商品列表" aria-describedby="el-id-6243-50" class="el-drawer rtl open" role="dialog" style="width: 700px;">
      <span class="el-drawer__sr-focus" tabindex="-1"></span>
      <header class="el-drawer__header">
        <span id="el-id-6243-51" role="heading" aria-level="2" class="el-drawer__title">商品列表</span>
        <button aria-label="el.drawer.close" class="el-drawer__close-btn" type="button" @click="details_div=false">
          <i class="el-icon el-drawer__close">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
              <path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path>
            </svg>
          </i>
        </button>
      </header>
      <div id="el-id-6243-50" class="el-drawer__body">
        <div style="width: 100%; height: 50px ">
          <!--查询条件-->
          <el-form :inline="true" class="demo-form-inline center" style="inline-height:50px; text-align: center; margin: auto">
            <el-form-item label="商品名称:">
              <el-input v-model="productVo.productName" placeholder="请输入商品名称"></el-input>
            </el-form-item>
            <el-form-item label="一级分型:">
              <el-select v-model="productVo.productType1" >
                <el-option
                    v-for="type in productType1"
                    :label="type.productTypeName"
                    :value="type.id"
                    :key="type.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="二级分型:">
              <el-select v-model="productVo.productType2" >
                <el-option
                    v-for="type in productType2"
                    :label="type.productTypeName"
                    :value="type.id"
                    :key="type.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-tiem>
              <el-button type="primary" icon="el-icon-search"  @click="queryProduct" >搜索</el-button>
            </el-form-tiem>
          </el-form>
          <!--数据表格-->
          <el-table
              :data="product"
              style="width: 100%">
            <el-table-column
                prop="productId"
                label="编号"
                width="160">
            </el-table-column>
            <el-table-column
                prop="imageUrl"
                label="图片"
                width="120">
            </el-table-column>
            <el-table-column
                prop="productName"
                label="商品名称"
                width="120">
            </el-table-column>
            <el-table-column
                prop="productTypeName"
                label="类型"
                width="120">
            </el-table-column>
            <el-table-column
                label="操作"
                width="120">
              <template slot-scope="scope">
            <span>
              <el-button type="primary" icon="el-icon-truck" @click="getOne(scope.row.id)">查看供应商</el-button>
            </span>
              </template>
            </el-table-column>
          </el-table>
          <!--分页插件-->
          <div  class="page">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[2, 5, 10, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div  class="el-overlay" style="z-index: 2055;" v-show="details_div2">
    <div aria-modal="true" aria-label="供应商商品" aria-describedby="el-id-6243-50" class="el-drawer rtl open" role="dialog" style="width: 700px;">
      <span class="el-drawer__sr-focus" tabindex="-1"></span>
      <header class="el-drawer__header">
        <span  role="heading" aria-level="2" class="el-drawer__title">供应商商品</span>
        <button aria-label="el.drawer.close" class="el-drawer__close-btn" type="button" @click="details_div2=false">
          <i class="el-icon el-drawer__close">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
              <path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path>
            </svg>
          </i>
        </button>
      </header>
      <div class="el-drawer__body">
        <!--数据表格-->
        <el-table
            :data="product"
            style="width: 100%">
          <el-table-column
              prop="productId"
              label="编号"
              width="120">
          </el-table-column>
          <el-table-column
              prop="imageUrl"
              label="图片"
              width="120">
          </el-table-column>
          <el-table-column
              prop="productName"
              label="商品名称"
              width="120">
          </el-table-column>
          <el-table-column
              label="供应商公司名称(供应商电话)"
              width="200">
            <template slot-scope="scope">
              <span>{{scope.row.supplierName+"("+scope.row.supplierNumber+")"}}</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="supplierPrice"
              label="单价(元)"
              width="120">
          </el-table-column>
          <el-table-column
              label="操作"
              width="120">
            <template slot-scope="scope">
            <span>
              <el-button type="primary" icon="el-icon-sold-out" @click="addProduct(scope.row)">添加采购</el-button>
            </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: "PurchaseOrders",
  data(){
    return{
      details_div:false,
      details_div2:false,
      //每页行数
      pageSize: 5,
      //总页数
      total: 0,
      // 当前页
      currentPage: 1,
    //所有商品
      product:[],
      //添加订单
      PurchaseOrders:{
        purchasEorderNumber:'',
        purchaseOrderAmount:0,
        register:'',
        purchaseOrderTime:'',
        list:[]
      },
      //采购订单详情
      order:[],
      //商品类型
      productType1:[],
      productType2:[],
      //商品查询条件
      productVo:{
        productName:'',
        productType1:'',
        productType2:''
      }
    }
  },
  created() {
    this.PurchaseOrders.purchaseOrderTime=this.nowDate()

  },
  methods:{
    //添加商品到采购单详情表格
     addProduct(row){
       this.details_div2=false
        let order={}
        order.supplierId=row.supplierId
       order.productId=row.id
       order.productName=row.productName
       order.supplierName=row.supplierName
       order.supplierNumber=row.supplierNumber
       order.productPrice=row.productPrice
       order.total=''
       this.order.push(order)
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.queryProduct()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.queryProduct()
    },
    //查看供应商
    async getOne(id){
       this.product=[]
       this.details_div=false
       this.details_div2=true
      const {data: res} = await this.$http.post
      (`/product/getOne/${id}`,)
      this.product.push(res)
      console.log(res)
    },
    //查询所有商品
    async queryProduct(){
      const {data: res} = await this.$http.post
      (`/product/list/${this.currentPage}/${this.pageSize}`, this.productVo)
      this.product = res.list
      this.total = res.total
    },
    //获取当前时间
    nowDate(){
      let getTime=new Date().getTime();
      let time=new Date(getTime);
      let year=time.getFullYear();//年
      let month=(time.getMonth()+1).toString().padStart(2,'0');
      let date=time.getDate().toString().padStart(2,'0');
      let hour=time.getHours().toString().padStart(2,'0');
      let minute=time.getMinutes().toString().padStart(2,'0');
      let second=time.getSeconds().toString().padStart(2,'0');
      return (
          year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second
      )
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //采购单详情数量框失焦事件
    amount(index,count,price){
       //为订单详情小计赋值
       this.order[index].total=count*price
       //更新总计
       this.PurchaseOrders.purchaseOrderAmount+=count*price
    },
    //添加采购单及详情
    async addOrder(){
       this.PurchaseOrders.list=this.order
      console.log(this.PurchaseOrders)
      const {data: res} = await this.$http.post
      (`/purchaseOrder/addOrder`,this.PurchaseOrders)
      if(res=="ok"){
        this.$message({
          message: '提交成功，需要审核',
          type: 'success'
        })
        location.reload()
      }else {
        this.$message({
          message: '提交失败，请重试',
          type: 'success'
        })
      }
    }
  }
}
</script>

<style scoped>
.card {
  box-sizing: border-box;
  padding: 20px;
  overflow-x: hidden;
  background-color: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  box-shadow: 0 0 12px #0000000d
}
.page{
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>